<template>
	<view class="container">
		<sa-tabs :tabList="tabList" @onClickTab="tabChange"></sa-tabs>

		<view class="order-panel">
			<view class="order-item" v-for="item in orders" :key="item.id" @click="gotoOrderDetail(item)">
				<view class="order-name">
					<view>{{item.userName}}</view>
					<view class="serial-num">{{orderNo(item)}}</view>
				</view>
				<view class="order-info">
					<image :src="item.userAvatar || '/static/logo.png'" mode="aspectFill"></image>
					<view class="order-detail">
						<view class="order-code">订单号:{{item.id}}</view>
						<view class="order-time">下单时间:{{formatDateTime(item.createTime)}}</view>
						<view class="order-num">数量：{{item.orderNums}}</view>
					</view>
				</view>
				<view class="order-price">
					订单金额: {{priceTransform(item.orderMoney)}}
				</view>
				<template v-if="item.incomeMoney">
					<view class="order-price">
						实际收入: {{priceTransform(item.incomeMoney)}}
					</view>
				</template>
			</view>
		</view>
		<uni-load-more :status="status" />
	</view>
</template>

<script>
	import {
		getShopPayType,
		getPreOrderNew,
		getPreOrderComplete,
		getPostOrderNew,
		getPostOrderComplete,
		getDirectOrder,
		getOrderByState
	} from '@/api/shops/shopOrder/shopOrder.js'
	import {
		transform
	} from '@/minix/mixin.js'
	import {
		throttle
	} from '@/utils/reqUtil.js'
	export default {
		mixins: [transform],
		data() {
			return {
				tabList: [ {
					text: "已支付"
				}, {
					text: "已完成"
				},{
					text: "待支付"
				}],
				shopId: '',
				orders: [],
				status: 'more',
				current: 1,
				totalPage: 0,
				orderState: 3,
			}
		},
		onPullDownRefresh() {
			this.current = 1
			this.orders = []
			this.getOrders()
		},
		onReachBottom() {
			if (this.status === 'noMore') {
				return
			}
			throttle(() => {
				this.current++
				this.getOrders()
			})()
		},
		onLoad: function(option) {
			this.shopId = option.shopId
			this.init()
		},
		methods: {
			init() {
				this.getOrders()
			},
			getOrders() {
				this.status = 'loading'
				getOrderByState({
					current: this.current,
					state: this.orderState
				}).then((res) => {
					if (this.current == 1) {
						this.totalPage = res.totalPage
					}
					if (this.totalPage <= res.page) {
						this.status = 'noMore'
					} else {
						this.status = 'more'
					}
					if (res.list.length > 0) {
						this.orders.push(...res.list)
					}
				}).catch(() => {
					this.status = 'noMore'
				}).finally(() => {
					uni.stopPullDownRefresh()
				})

			},
			orderNo(item) {
				if (item.serialNum) {
					return '流水号:' + item.serialNum.toString().padStart(4, '0')
				} else if (item.deskName) {
					return '桌号:' + item.deskName
				} else {
					return '';
				}
			},

			tabChange(e) {
				if (e.index === 0) {
					this.orderState = 3
				} else if (e.index === 1) {
					this.orderState = 1
				} else {
					this.orderState = 2
				}
				this.current = 1
				this.orders = []
				this.getOrders()
			},
			gotoOrderDetail(order) {
				// 1预付款  0 直接付款
				if (order.orderType === 1 || order.orderType === 0) {
					uni.navigateTo({
						url: '/subpkg/shops/preOrderDetail/preOrderDetail?id=' + order.id
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.order-panel {
		background-color: #fff;
		display: flex;
		flex-direction: column;

		.order-item {
			padding: 10px;
			padding-left: 20px;
			border-bottom: 1px solid #bcbcbc;
			display: flex;
			flex-direction: column;

			.order-name {
				font-size: 14px;
				font-weight: bold;
				margin-bottom: 5px;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.serial-num {
					font-size: 12px;
					font-weight: normal;
				}
			}

			.order-info {
				display: flex;
				flex-direction: row;

				image {
					width: 60px;
					height: 60px;
				}

				.order-detail {
					display: flex;
					flex-direction: column;
					font-size: 12px;
					font-weight: 400;
					margin-left: 10px;
					justify-content: space-between;

					.order-code {}
				}

			}

			.order-price {
				display: flex;
				align-items: flex-end;
				justify-content: flex-end;
				font-size: 14px;
				font-weight: 600;
			}
		}
	}
</style>